let { form, $, layer } = layui;
import Manage from "./manage.js";//引入manage跳转页面
export default class Login {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let template = `
        <style>
        .card {
            width: 600px;
            margin: auto;
        }
        </style>
        <div class="layui-card card">
        <div class="layui-card-header">登录</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
        `;
        $("#root").html(template);
    }
    handle() {
        //表单验证方法
        form.verify({
            username: function (value, item) {
                let msg = "";
                if (!/^\w{6,20}$/.test(value)) {
                    return "用户名格式不正确";
                }
                return msg;
            }
        });
        //监听事件
        form.on('submit(submitForm)', function (data) {
            console.log('submit', data.field);
            $.ajax({
                type: "post",
                url: "/users/login",
                data: data.field,
                success(res) {
                    console.log(res);//{status: 1, data: Array(1)}
                    if (res.data[0].privilege) {//data: Array(1)数字,0:代表我们填写的所有信息的第一位
                        if (res.status == 1) {//如果为1 代表是管理员进入后台系统
                            layer.msg("登录成功");//弹出层
                            // new Manage();
                            location.href = "#manage";
                        } else {
                            layer.msg("登录失败");
                        }
                    } else {
                        layer.msg("你不是管理员用户");
                    }
                    // if (res.status == 1) {//如果为1 代表是管理员进入后台系统
                    //     layer.msg = "登录成功";//弹出层
                    //     // new Manage();
                    //     location.href = "#manage";
                    // } else {
                    //     layer.msg = "登录失败";
                    // }
                }
            });
            return false;
        });
    }
}